<template>
    
    <div>
        <div >
            <Navbar @search="search"></Navbar>
            <div id="Home" @scroll="scroll" ref="list">
                <Swiper
                :list = "imgs"
                auto
                loop
                :height="height"
                :weight="weight"
            >
            </Swiper>
            <HomeComponents></HomeComponents>
            <HomeNewGoods></HomeNewGoods>
                
            </div>
            <Tabbar></Tabbar>
        </div>
            <div >
                <transition name="down">
                    <Homesearch @search="search" v-show="issearch"></Homesearch>
                </transition>
            </div>
    </div>
    
</template>

<script>
import Tabbar from '../pages/Tabbar.vue';
import Navbar from '../pages/Navbar.vue';
import HomeComponents from '../pages/Home-components.vue';
import Homesearch from '../pages/Home-search.vue'
import HomeNewGoods from '../pages/Home-NewGoods.vue'
import {Swiper} from 'vux';
import {mapState} from 'vuex'
export default {
    data:function(){
        return {
            height:"25vh",
            weight:"100vw",
            issearch:false,
            
           
        }
    },
    methods:{
        search(){
            this.issearch = !this.issearch;
        },
        
        //滚动事件监听函数
        scroll:function(e){
            this.$store.commit("setCurrentScrollTop",e.target.scrollTop)
            
        }
    },
    computed:{
        ...mapState([
            "imgs",
            "currentScrollTop"
        ])
    },
    components:{
        Tabbar,
        Navbar,
        Swiper,
        HomeComponents,
        Homesearch,
        HomeNewGoods
    },
    mounted:function(){
        // 提交action使用dispath。第一个参数action的名字，第二个参数是提交附带的数据。

        this.$store.dispatch("Swiper");
        this.$refs.list.scrollTop = this.currentScrollTop
    },
}
</script>


<style scoped>
   *{
       background-color: #e8e8e8;
   }
   #Home{
        padding-top: 8vh;
        overflow-y: scroll;
        width:100vw;
        height: calc(100vh - 10vh);
   }
   .down-leave{
        transform: translate(0,0);
    }
    .down-leave-active{
        transition: all 0.7s;
    }
    .down-leave-to{
        transform: translate(0,-100%);
    }

    .down-enter{
        transform: translate(0,-100%);
    }
    .down-enter-active{
        transition: all 0.7s;
    }
    .down-enter-to{
        transform: translate(0,0);
    }
</style>
